<template>
  <div class="user-info-edit">
    <a-descriptions :title="$t('all.autotext1287.1')"></a-descriptions>
    <a-form-model
      ref="form"
      :model="formData"
      :label-col="{ span: 4, offset: 2 }"
      :wrapper-col="{ span: 12 }"
    >
      <a-row :gutter="16">
        <a-col :span="12" v-for="item in formItemList" :key="item.prop">
          <a-form-model-item :label="item.label" :prop="item.prop">
            <template v-if="item.component === 'text'">
              {{ formData[item.prop] }}
              <a v-copy="formData[item.prop]" style="margin-left: 10px">{{ $t('all.autotext1285') }}</a>
            </template>
            <!-- 上传文件 -->
            <a-upload
              v-else-if="item.component === 'AUpload'"
              accept=".jpg, .jpeg, .png"
              action="/api/common/upload"
              list-type="picture-card"
              name="file"
              :multiple="false"
              :headers="{ authorization: 'authorization-text' }"
              :file-list="headImageFileList"
              :show-upload-list="false"
              @change="handleChangeAvatar"
            >
              <a-avatar
                ref="uploadAvatar"
                :key="formData[item.prop]"
                :size="48"
                :src="formData[item.prop] | dealImageUrl"
                :alt="$t('all.autotext618')"
              />
            </a-upload>
            <a-date-picker
              v-else-if="item.component === 'ADatePicker'"
              v-model="formData[item.prop]"
              :disabled-date="disabledDate"
              valueFormat="YYYY-MM-DD"
            />
            <a-select v-else-if="item.component === 'ASelect'" v-model="formData[item.prop]" :disabled="formData.verifiedStatus === 1">
              <a-select-option v-for="(item, index) in item['options']" :key="index" :value="item.value">
                {{ item.desc }}
              </a-select-option>
            </a-select>
            <!-- 普通文本框 -->
            <a-input v-else v-model="formData[item.prop]" :disabled="item.disabled"></a-input>
            <a-button
              v-if="item.prop === 'email'"
              class="suffix-btn"
              type="link"
              @click="handleBindEmail"
            >
              {{ formData['email'] ? $t('all.autotext511') : $t('all.autotext1270') }}
            </a-button>
            <a-button
              v-if="item.prop === 'phone'"
              class="suffix-btn"
              type="link"
              @click="handleBindPhone"
            >
              {{ $t('all.autotext429') }}
            </a-button>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-form-model-item></a-form-model-item>
    </a-form-model>
    <!-- 绑定信息弹窗 -->
    <Modal
      :modalTitle="modalTitle"
      :modalVisible="modalVisible"
      :isPhone="isPhone"
      :phoneNumber="formData.phone"
      @emailUpadte="handleEmailUpdate"
      @closeModal="closeModal"
    />
  </div>
</template>

<script>
import moment from 'moment/moment'
import Modal from './Modal.vue'

export default {
  name: 'UserInfoEdit',
  components: { Modal },
  props: {
    userInfo: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      formItemList: [
        { label: this.$t('all.autotext1442'), prop: 'headimg', component: 'AUpload' },
        { label: this.$t('all.autotext977'), prop: 'name' },
        { label: this.$t('all.autotext551'), prop: 'account', component: 'text' },
        { label: this.$t('all.autotext192'), prop: 'cardType', component: 'ASelect', options: this.$const.DOCUMENT_TYPE },
        { label: this.$t('all.autotext967'), prop: 'pinCode', component: 'text' },
        { label: this.$t('all.autotext1359'), prop: 'idCard' },
        { label: this.$t('all.autotext44'), prop: 'email', disabled: true },
        { label: this.$t('all.autotext1436'), prop: 'birthday', component: 'ADatePicker' },
        { label: this.$t('all.autotext709'), prop: 'phone', disabled: true }
      ],
      formData: {
        headimg: ''
      },
      headImageFileList: [],
      modalVisible: false,
      modalTitle: '',
      isPhone: true // 更改手机号和邮箱共用一个弹框，用于判断
    }
  },
  created () {
    this.setFormData()
    this.initHeadImg()
  },
  methods: {
    setFormData () {
      this.formData = Object.assign({}, this.userInfo)
    },
    getFormData () {
      return this.formData
    },
    initHeadImg () {
      if (!this.formData.headimg) {
        this.headImageFileList = this.formData.headimg.split(',').map(item => ({
          url: this.$options.filters.dealImageUrl(item), // 补全地址
          uid: item,
          name: item,
          status: 'done',
          response: {
            data: item
          }
        }))
      }
    },
    disabledDate (current) {
      return current > moment().endOf('day')
    },
    handleChangeAvatar ({ file, fileList = [] }) {
      if (file.status === 'done') {
        const { response } = file
        if (response && response.status === '1' && response.data) {
          this.headImageFileList = fileList.slice(-1)
          this.$set(this.formData, 'headimg', response.data)
        } else {
          this.headImageFileList = []
          this.$message.error(response && response.detail || this.$t('all.autotext1259'))
        }
      } else {
        this.headImageFileList = fileList.slice(-1)
      }
    },
    /**
     * 处理绑定/更改邮箱信息
     * @param type
     */
    handleBindEmail () {
      const type = this.formData.email ? 'change' : 'bind'
      this.modalVisible = true
      this.isPhone = false
      if (type === 'bind') {
        this.modalTitle = this.$t('all.autotext1270')
      } else {
        this.modalTitle = this.$t('all.autotext757')
      }
    },
    handleBindPhone () {
      this.modalVisible = true
      this.isPhone = true
      this.modalTitle = this.$t('all.autotext725')
    },
    handleEmailUpdate (email) {
      this.formData.email = email
    },
    // 关闭弹窗
    closeModal (val) {
      this.modalVisible = false
      // 邮箱绑定/更换 手机号更换后 需重新请求信息且将点击编辑时保存的个人信息副本中的电话和邮箱进行更改
      if (val) {
        this.getUserDetail(1)
      }
    }
  }
}
</script>

<style scoped lang='less'>
.user-info-edit {
  .ant-form {
    .ant-col-12 {
      &:first-of-type {
        height: 52px;
      }
    }
    .ant-form-item {
      margin-bottom: 12px;
      .ant-form-item-children {
        position: relative;
        .suffix-btn {
          position: absolute;
          left: 100%;
          top: -8px;
        }
      }
      .ant-upload-picture-card-wrapper {
        /deep/ .ant-upload {
          width: unset;
          height: unset;
          border: none;
          padding: 0;
          margin: 0;
        }
      }
    }
  }
}
</style>
